<template>
  <div v-if="houseTree.length>0">
    <table>
      <thead>
      <tr>
        <th rowspan="2">楼栋名称</th>
        <th v-for="item in units" :colspan="item.roomLength">{{item.name}} 单元</th>
      </tr>
      <tr>
        <th v-for="item in rooms">{{item.name}} 号房</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="floor in houseTree">
        <th>{{floor[0][config.floor]}} 层</th>
        <th v-for="room in floor">
          {{room[config.room]}}
        </th>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
    export default {
      name:'houseTable',
      watch:{
        houseList() {
          this.clean();
          this.init()
        }
      },
      data() {
        return {
          buildingName: '',
          units: [],
          floors:[],
          rooms:[],
          houseTree: [],
        }
      },
      props: {
        houseList: {
          type:Array,
          required:true
        },
        config:{
          type:Object,
          default:function () {
            return {
              floor:'floorNo',
              unit:'unitNo',
              room:'roomNo'
            }
          },
        }
      },
      methods:{
        init() {
          let x = 0,
              y = 0,
              vm = this;
          /*提取出单元，设置横坐标长度*/
          this.units = _
            .chain(this.houseList)
            .groupBy(this.config.unit)
            .map(v => _.unionBy(v,this.config.room))
            .forEach((v,i,array) => {
              x += v.length;
              v.forEach(item => {
                vm.rooms.push({name: item[vm.config.room]});
              });
              v.name = v[0][this.config.unit];
              v.roomLength = v.length;
              v.baseX = array[i-1] ? array[i-1].baseX + array[i-1].length : 0;
            })
            .value();
          /*将数据源中的楼层排序、去重提取出来，设置纵坐标长度*/
          this.floors = _
            .chain(this.houseList)
            .unionBy(this.config.floor)
            .map(i => i[this.config.floor])
            .reverse()
            .value();
          y = this.floors.length;
          /*构建骨架*/
          for(let i=0;i<y;i++){
            this.houseTree.push([]);
            for(let j=0;j<x;j++){
              this.houseTree[i].push({})
            }
          }
          /*放房源*/
          const setXIndex = item => _.find(vm.units, o => o.name === item[vm.config.unit]).baseX + item[vm.config.room] - 1;
          this.houseList.forEach((item) => {
            this.houseTree[_.indexOf(this.floors,item[this.config.floor])][setXIndex(item)] = item;
          });
        },
        clean() {
          this.buildingName = '';
          this.units = [];
          this.floors = [];
          this.rooms = [];
          this.indexList = [];
          this.houseTree = [];
        }
      }
    }
</script>
<style lang="scss" scoped>
  table{
    width:100%;
    th,td{
      border:1px solid #ccc;
      padding:5px;
      text-align: center;
    }
  }
</style>
